import React from 'react';
import { connect } from 'react-redux';
import { Modal,Row, Col } from 'antd';
import { loadQuestions } from "../../../actions/questionActions" ;
import SimpleCategoryTree from '../category/SimpleCategoryTree' ;
import QuestionList from './QuestionList' ;
import "./style.css";

class QuestionSeletor extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            dataSource :{},
            targetKeys:{},
            loading:false,
            pagination: { pageSize:10,current:1,},
            size: 'large',
            selectedRowKeys:[],
            selectedRows:[],
            data:[],
        }
    }
    
    componentDidMount(){
        this.fetchQuestion();
    }
    
    fetchQuestion = (category,pagination) => {
        this.setState({ loading: true });
        category = category || "0";
        pagination = pagination || {pageSize:11,current:1};
        this.props.loadQuestions(category,pagination.current,pagination.pageSize).then( (res) => {
            pagination.total = this.props.total;
            this.setState({
                loading: false,
                data:res.data.body.questions,
                pagination,
            });
        });
    }

    onQuestionSelect = (selectedRows) => {
        this.setState({selectedRows});
    }

    onSelectChange = (selectedRowKeys) => {
        this.setState({ selectedRowKeys });
    }

    handleTableChange = (pagination, filters, sorter) => {
        const pager = this.state.pagination;
        pager.current = pagination.current;
        this.setState({
            pagination: pager,
        });
        this.fetchQuestion("0",pagination);   
    }

    onTreeSelect = (treenode) => {
        this.setState({node:treenode});
        this.fetchQuestion(treenode);  
    }
    

    handlerOk = () => {
        this.props.onOk(this.state.selectedRows);
    }

    handlerCancel = () => {
        this.props.onClose();
    }


    render() {
        return (
            <div id="questions-selector">
                <Modal
                    title="20px to Top"
                    width="976px"
                    wrapClassName="vertical-center-modal"
                    visible={this.props.visible}
                    onOk={ this.handlerOk }
                    onCancel={ this.handlerCancel } >

                <Row>
                    <Col span={4} >
                        <SimpleCategoryTree onSelect={this.onTreeSelect}/>
                    </Col>
                    <Col span={10}> 
                            <QuestionList 
                                    sourceData={this.props.sourceData} 
                                    count={this.props.total} 
                                    handleTableChange={this.handleTableChange}
                                    pagination={this.state.pagination}
                                    loading={this.state.loading}
                                    onSelect={this.onQuestionSelect}
                                    />
                    </Col>      
            </Row>
            </Modal>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
  return {
    sourceData: state.question.questions,
    total:state.question.total,
   }
}

QuestionSeletor.propTypes = {
    loadQuestions:React.PropTypes.func.isRequired,
};

export default connect(mapStateToProps,{loadQuestions})(QuestionSeletor);